<div class="tab-pane tab-pane-global fade active show" id="id0" >
    {% if error %}
      <p>{{ error }}</p>
    {% else %}

<!-- <div class="container container-diff"> -->

<div class="row" >

<div class="col-12 col-sm-4 col-md-4 col-lg-4 pl-5"    >

<div class="w-40 list-group-wrapper" >
  <br>
  <span class="pl-3 block-diff-file-detail">Properties</span>
  <hr>
  <ul class="mb-1 pl-3 pb-2 list-group" >

      {% load index %}
      {% for entry in diff_detail %}
      {% with propname=entry|index:0  diff=entry|index:1 %}
    <li class="list-group-item-diff text-sm">

      <a  class="{% if diff == 1 %} text-warning {% else %} text-success {% endif %} nav-link-prop {% if forloop.counter0 == 0%} active {% endif %} " data-toggle="pill" href="#v-pills-{{forloop.counter0}}" role="tab" aria-controls="v-pills-{{forloop.counter0}}" aria-selected="true" > {{ propname }}</a>

    </li>
      {% endwith %}
      {% endfor %}

  </ul>
</div>


</div>

<div class="col-12 col-sm-8 col-md-8 col-lg-8 ">

<div class="w-40 list-group-wrapper" style="border-left: 1px solid rgba(0,0,0,.1);">
 <div class="tab-content pl-3" id="v-pills-tabContent">
      {% load to_tag %}
      {% for entry in diff_detail %}
      {% with propname=entry|index:0 propfullname=entry|index:2 mismatched=entry|index:3  extra=entry|index:4 missing=entry|index:5 %}

      <div class="tab-pane fade show {% if forloop.counter0 == 0 %} active {% endif %}" id="v-pills-{{forloop.counter0}}" role="tabpanel" aria-labelledby="v-pills-{{forloop.counter0}}">
	<br>
	<!-- <span class="badge badge-info">{{ propname }}</span> -->
	<span class="block-diff-file-detail"><i class="fa fa-hand-point-right" aria-hidden="true"></i> &nbsp; <a onclick="createTab('tab--file-{{ propname|to_tag }}', '&nbsp;<span class=\'text-success tab-icon\'><i class=\'far fa-file-code\' ></i></span>{{ propname }}', '/fetch_propfile/{{ log_id }}/{{ propname }}', true)" > {{ propname }}</a></span>
  <hr>
		<div class="form-group" >
		  <fieldset>
		    <label class="control-label" >MISMATCHED(Configuration different in the 2 files.)</LABEL>
		    <textarea class="form-control bg-light"  rows="4" readonly="">{{ mismatched }}</textarea>
		  </fieldset>
		  <fieldset>
		    <label class="control-label" >EXTRA(Configuration not exist in the default file)</LABEL>
		    <textarea class="form-control bg-light"  rows="4" readonly="">{{ extra }}</textarea>
		  </fieldset>
		  <fieldset>
		    <label class="control-label" >MISSING(Properties not exsit in the loaded file)</label>
		    <textarea class="form-control bg-light"  rows="4" readonly="">{{ missing }}</textarea>
		  </fieldset>
		</div>
      {% endwith %}
      </div>

      {% endfor %}
</div>
</div>

</div>

<!-- </div> -->

          
{% endif %}
</div>
